<template>
  <div class="verification-code-container">
    <div class="input-group">
      <!-- 手机号输入框 -->
      <!-- <input type="tel" v-model="phone" placeholder="请输入手机号" class="phone-input" :class="{ error: phoneError }"
      @input="validatePhone" maxlength="11" />-->

      <!-- 验证码输入框 -->
      <input
        type="text"
        v-model="code"
        placeholder="请输入验证码"
        class="code-input"
        :class="{ error: codeError && code.length > 0 }"
        maxlength="6"
      />

      <!-- 获取验证码按钮 -->
      <button
        class="get-code-btn"
        :disabled="!canSend || isCounting"
        :class="{
                disabled: !canSend || isCounting,
                counting: isCounting
            }"
        @click="sendCode"
      >{{ isCounting ? `${countdown}s后重新获取` : '获取验证码' }}</button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onUnmounted } from "vue";
// 定义组件事件
const emit = defineEmits(["sendSuccess","confirm"]);

// 手机号相关
const phone = ref("153677978222");
const phoneError = ref(true);

// 验证码相关
const code = ref("");
const codeError = ref(true);

// 倒计时相关
const isCounting = ref(false);
const countdown = ref(60);
const canSend = ref(true);
let countdownTimer = null;

// 验证手机号格式
const validatePhone = () => {
  const reg = /^1[3-9]\d{9}$/;
  phoneError.value = phone.value.length > 0 && !reg.test(phone.value);
  canSend.value = !phoneError.value && phone.value.length === 11;
};

// 监听手机号变化自动验证
watch(phone, validatePhone);

// 监听验证码长度验证
watch(code, () => {
  codeError.value = code.value.length > 0 && code.value.length !== 6;
});

// 发送验证码
const sendCode = () => {
  if (!canSend.value || isCounting.value) return;

  // 这里可以添加实际发送验证码的API调用
  emit("sendSuccess");

  // 开始倒计时
  startCountdown();
};

// 开始倒计时
const startCountdown = () => {
  isCounting.value = true;
  countdown.value = 60;

  countdownTimer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(countdownTimer);
      isCounting.value = false;
    }
  }, 1000);
};

// 确认按钮点击事件
const handleConfirm = () => {
  if (!phone.value || phoneError.value) return;
  if (!code.value || code.value.length !== 6) return;

  // 这里可以添加验证验证码的逻辑
  console.log(`验证手机号 ${phone.value} 的验证码 ${code.value}`);

  // 触发成功回调
  emit("confirm", { phone: phone.value, code: code.value });
};

// 组件卸载时清除定时器
onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
});
defineExpose({
  code, 
})
</script>

<style scoped>
.verification-code-container {
  width: 100%;
  box-sizing: border-box;
}

.input-group {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 10px;
}

.phone-input {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
  width: 68%;
}

.code-input {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
  width: 70%;
}

.phone-input:focus,
.code-input:focus {
  outline: none;
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}

.phone-input.error,
.code-input.error {
  border-color: #ff4d4f;
}

.get-code-btn {
  padding: 12px 15px;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.get-code-btn:hover:not(.disabled) {
  background-color: #359e75;
  transform: translateY(-1px);
}

.get-code-btn.disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.get-code-btn.counting {
  background-color: #666666;
}

.error-message {
  color: #ff4d4f;
  font-size: 14px;
  margin: 0 0 15px 0;
  height: 20px;
}

.confirm-btn {
  width: 100%;
  padding: 14px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.confirm-btn:hover:not(:disabled) {
  background-color: #359e75;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 185, 131, 0.3);
}

.confirm-btn:disabled {
  background-color: #a0d9b9;
  cursor: not-allowed;
}
</style>
